<template>
    <section class="data_section" ref="data_section">
        <!--        <a :href="github" target="_blank">-->
        <el-row :gutter="20">
            <el-col :span="6">
                欢迎回来，<strong style="font-weight:bold">{{storeName}}</strong><br>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <br>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <strong style="font-weight:bold">待办事项</strong>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="3">
                <el-badge :value="200" :max="toDoListStatic.toBeShippedCount" class="item">
                    <el-button size="small">待发货</el-button>
                </el-badge>
            </el-col>
            <el-col :span="3">
                <el-badge :value="200" :max="toDoListStatic.returnedGoodsCount" class="item">
                    <el-button size="small">退换货</el-button>
                </el-badge>
            </el-col>
            <el-col :span="3">
                <el-badge :value="200" :max="toDoListStatic.shortageCount" class="item">
                    <el-button size="small">缺货</el-button>
                </el-badge>
            </el-col>
            <el-col :span="3">
                <el-badge :value="200" :max="toDoListStatic.shippRemindCount" class="item">
                    <el-button size="small">发货提醒</el-button>
                </el-badge>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <br>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="6">
                <strong style="font-weight:bold">统计数据</strong>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <br>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="6">
                <div class="total-frame">
                    <svg-icon icon-class="order" class="total-icon">
                    </svg-icon>
                    <div class="total-title" style="margin-bottom: 5px;">今日下单</div>
                    <div class="total-value">{{orderStatic.nowOrderCount}}</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="total-frame">
                    <svg-icon icon-class="total-today" class="total-icon">
                    </svg-icon>
                    <div class="total-title" style="margin-bottom: 5px;">今日销售总额</div>
                    <div class="total-value">{{orderStatic.nowOrderPay}}</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="total-frame">
                    <svg-icon icon-class="total-yesterday" class="total-icon">
                    </svg-icon>
                    <div class="total-title" style="margin-bottom: 5px;">昨日下单</div>
                    <div class="total-value">{{orderStatic.yesOrderCount}}</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="total-frame">
                    <svg-icon icon-class="total-week" class="total-icon">
                    </svg-icon>
                    <div class="total-title" style="margin-bottom: 5px;">昨日销售总额</div>
                    <div class="total-value">{{orderStatic.yesOrderPay}}</div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <br>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="6">
                <div class="total-frame">
                    <svg-icon icon-class="total-week" class="total-icon">
                    </svg-icon>
                    <div class="total-title" style="margin-bottom: 5px;">近7天下单</div>
                    <div class="total-value">{{orderStatic.qiOrderCount}}</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="total-frame">
                    <svg-icon icon-class="order" class="total-icon">
                    </svg-icon>
                    <div class="total-title" style="margin-bottom: 5px;">近7天销售总额</div>
                    <div class="total-value">{{orderStatic.qiOrderPay}}</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="total-frame">
                    <svg-icon icon-class="total-today" class="total-icon">
                    </svg-icon>
                    <div class="total-title" style="margin-bottom: 5px;">本月下单</div>
                    <div class="total-value">{{orderStatic.monthOrderCount}}</div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="total-frame">
                    <svg-icon icon-class="total-yesterday" class="total-icon">
                    </svg-icon>
                    <div class="total-title" style="margin-bottom: 5px;">本月销售总额</div>
                    <div class="total-value">{{orderStatic.monthOrderPay}}</div>
                </div>
            </el-col>
        </el-row>
    </section>
</template>

<script>
    import {toDoListStatic, homeOrderStatic} from '@/api/sys/store'

    import {mapGetters} from 'vuex'
    import salesTable from "./components/salesTable";  // 销售数据表格
    import commentList from "./components/commentList";  // 用户评论列表
    import cardList from "./components/cardList";  // card列表
    import logList from "./components/logList";  // 日志列表
    import barChart from '@/components/echarts/barChart' // 用户投资类型 柱状图
    import pieChart from '@/components/echarts/pieChart' // 用户投资类型 饼状图
    import radarChart from '@/components/echarts/radarChart' // 用户投资类型 雷达图
    import lineChart from '@/components/echarts/lineChart' // 用户投资类型 折线图
    import {github} from "@/utils/env";

    export default {
        data() {
            return {
                github: github,
                toDoListStatic: {
                    "toBeShippedCount": 10,// 待发货数量
                    "returnedGoodsCount": 2,// 退换货
                    "shortageCount": 5,// 缺货
                    "shippRemindCount": 65, // 发货提醒
                },
                orderStatic: {
                    "nowOrderCount": 1,// 今日订单
                    "nowOrderPay": 2,//今日销售总额
                    "yesOrderCount": 7, // 昨日订单
                    "yesOrderPay": 7,//昨日销售总额
                    "qiOrderCount": 9,// 7日订单
                    "qiOrderPay": 9,//7日销售总额
                    "monthOrderCount": 90, // 本月订单
                    "monthOrderPay": 67,//本月销售总额
                    // "weekOrderCount": 87, // 本周订单
                    // "weekOrderPay": 34 //本周销售总额
                }
            }
            int = 0;

        },
        components: {
            salesTable,
            commentList,
            cardList,
            logList,
            barChart,
            pieChart,
            radarChart,
            lineChart
        },
        created() {
            this.homeStatic();
        },
        computed: {
            ...mapGetters([
                'sidebar',
                'storeName',
                'avatar'
            ])
        },
        mounted() {
        },
        methods: {
            homeStatic() {
                toDoListStatic().then(res => {
                    if (res.code == 200) {
                        this.toDoListStatic = res.data;
                    }
                });
                homeOrderStatic().then(res => {
                    if (res.code == 200) {
                        this.orderStatic = res.data;
                    }
                });
            },
        }
    }
</script>

<style lang="less" scoped>
    .item {
        margin-top: 10px;
        margin-right: 20px;
    }

    .total-frame {
        border: 1px solid #DCDFE6;
        padding: 20px;
        height: 100px;
    }

    .total-icon {
                913656
        color: #409EFF;
        width: 60px;
        height: 60px;
    }

    .total-title {
        position: relative;
        font-size: 16px;
        color: #909399;
        left: 70px;
        top: -35px;
    }

    .total-value {
        position: relative;
        font-size: 18px;
        color: #606266;
        left: 70px;
        top: -25px;
    }

    .data_section {
        margin: 20px;
        border-radius: 2px;

        .row_list {
            margin-bottom: 20px;

            .row_base {
                padding: 10px;
                box-sizing: border-box;
                background: #fff;
                border-radius: 6px;
                height: 120px;
            }
        }

        .order_list {
            .orderArea {
                width: 100%;
                height: 300px;
                background: #fff !important;
                border-radius: 6px;
                box-sizing: border-box;
                padding: 10px;
                padding-top: 40px;
                overflow: hidden;
            }

            .orderbarArea {
                height: 370px;
            }
        }

        .data_list {
            text-align: center;
            font-size: 14px;
            border-radius: 6px;
            padding: 10px;
            color: #fff;
            height: 80px;

            .leftItem {
                align-items: start;
                justify-content: space-between;
                text-align: left;
            }

            .rightItem {
                width: 62px;

                align-items: center;
                justify-content: center;

                .svg-icon {
                    font-size: 30px;
                }
            }

            .number {
                font-size: 22px;
                font-weight: bold;

                .perTitle {
                    font-size: 13px;
                    margin-left: 5px;
                }
            }
        }

        .pay {
            .leftItem {
                justify-content: space-around;
            }
        }

    }

</style>
